<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <p class="one" ref="one">{{count}}</p>
        <p class="two">{{double()}}</p>
        <p class="three">{{triple}}</p>
        <button @click="count++">点击</button>
    </div>
</body>
<script>

    // Vue特征
    // 1. 声明式渲染(Vue实例Vue初始化)
    // 2. 响应式(Vue实例数据更新)

    // 生命周期分为三个阶段: 初始化阶段  更新阶段  销毁阶段   8个钩子函数

    // 初始化阶段
    // beforeCreate
    // 第一个生命周期钩子函数,发生在Vue实例创建之后, 进行数据侦听(data)和事件/侦听器(watch)的配置之前同步调用,此时Vue实例选项(new Vue(options))配置之前

    // created
    // 在实例创建完成后被立即同步调用。在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件 / 侦听器的回调函数。然而，挂载阶段还没开始，且 $el property 目前尚不可用。

    // beforeMount
    // 在挂载开始之前被调用：相关的 render 函数首次被调用。 通过render()函数将模板编译为vDom (虚拟DOM), 此时还未渲染真实DOM


    // mounted
    // 实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。
    // vDom  解析为真实DOM 渲染到挂载的元素中
    // 注意 mounted 不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作，可以在 mounted 内部使用 vm.$nextTick：

    // beforeUpdate
    // updated

    // beforeDestroy
    // destroyed

    var vm = new Vue({
        // el: "#app",
        data: {
            count: 1,
        },
        methods: {
            double: function () {
                console.log("double被调用");
                return this.count * 2;
            }
        },
        // template:``,
        computed: {
            triple: function () {
                console.log("triple被调用");
                return this.count * 3;
            },
        },
        watch: {
            count: function (newVal) {
                console.log("监听到count改变", newVal);
            }
        },
        beforeCreate: function () {
            console.log("1. beforeCreate 实例", this);
            console.log("1. beforeCreate 数据", this.$data, this.count);
            console.log("1. beforeCreate 方法", this.double);
            console.log("1. beforeCreate 计算属性", this.triple);
            console.log("1. beforeCreate $el", this.$el);
        },
        created: function () {
            // new Vue(options) 选项已经配置完毕
            console.log("2. created 实例", this);
            console.log("2. created 数据", this.$data, this.count);
            console.log("2. created 方法", this.double);
            console.log("2. created 计算属性", this.triple);
            console.log("2. created $el", this.$el);
        },
        beforeMount: function () {
            console.log("3.beforeMount 实例", this);
            console.log("3.beforeMount 数据", this.$data, this.count);
            console.log("3.beforeMount 方法", this.double);
            console.log("3.beforeMount 计算属性", this.triple);
            var one = document.getElementsByClassName("one")[0];
            console.log("3.beforeMount 模板", one);
            console.log("3.beforeMount $el", this.$el);
        },
        mounted() {
            console.log("4.mounted 实例", this);
            console.log("4.mounted 数据", this.$data, this.count);
            console.log("4.mounted 方法", this.double);
            console.log("4.mounted 计算属性", this.triple);
            var one = document.getElementsByClassName("one")[0];
            console.log("4.mounted 模板", one);
            console.log("4.mounted $el", this.$el);
            console.log("4.mounted $refs", this.$refs);
        },
    })

    vm.$mount("#app");


    var a = 1;
    var b = 2;
    var c = a + b;

    function fn() {
        var a = 1;
        var b = 2;
        var c = a + b;
        return c;
    }


    function fn(a = 0, b = 0) {  //形参 => 接收实际参数
        // var a = 1;
        // var b = 2;
        var c = a + b;
        return c;
    }

    fn(1, 2); // 实际参数调用时传入


</script>

</html>